<template>
  <div>
    {{msgss.msg}}
    {{count}}<br>
    {{num.a}}<br>
    {{userRef().value+'一'}}<br>
    <zujian :name="name"></zujian><br>
    <button @click="inc()">按键</button><br>
    <!-- 新模板语法  -->
    <li v-for="(item,index) in 3" :key="index" :ref="(el)=>{divs[index] = el}"></li>
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
      </el-checkbox-group>
  </div>
</template>

<script>
import { 
  ref,reactive,computed,readonly ,watch,watchEffect,onMounted,customRef,onRenderTracked,onRenderTriggered,provide,inject,
  isRef,isProxy, isReactive, isReadonly,unref,toRef , toRefs ,markRaW, shallowReactive , shallowReadonly, shallowRef,toRaw
} from 'vue'
import zujian from './components/zujian.vue'
export default {
  components:{
    zujian
  },

  //data,methods,周期钩子函数，计算，侦听，自定义方法等都会放在setup这里
  //props:接受参数的对象
  //contxt:上下文对象，相当于this的功能
  setup(props,contxt) {
    const msgss = reactive({msg:'弟弟滴滴答答大大'})
    const count = ref(0)
    const num = reactive({a:1})
    const msg = computed(()=>num.a)
    const randlys = readonly({a:'地狱行者'})
    const name = ref('三味真火')
    const divs = ref([])
    console.log(toRefs);
    
    onMounted(()=>{
       console.log('isRef',isRef(count))
       console.log('isProxy',isProxy(num))
       console.log('isReactive',isReactive(num))
       console.log('isReadonly',isReadonly(randlys))
       console.log('unref',unref(count))
       const res = toRef(num,'a')
       console.log('toRef',res)
       const resf = toRefs(num)
       console.log('toRefs',resf)
      //  const refM = markRaW({value:'大闹天宫'})
      //  console.log(isReactive(reactive(refM)))
    })

    watchEffect((Invalidate)=>{
      num.a
      Invalidate(()=>{//副作用函数,监听项更新或组件卸载时触发
        
      })
    },{onTrack(e){//当一个 reactive 对象属性或一个 ref 作为依赖被追踪时，将调用 onTrack
      
    },onTrigger(e){//依赖项变更导致副作用函数被触发时，将调用 onTrigger
      
    },
    flush:'sync'//标识副作用函数为同步触发，pre为组件更新时触发，默认为port
    })

    watch(num,(num1,preNum1,Invalidate)=>{//三个参数，现参数，原参数，清除副作用时传递的参数
      Invalidate(()=>{//副作用函数监听项首次不会触发,加载页面时也不调用,监听项更新或组件卸载时触发，这是与watchEffect的区别
        
      })
    })

    provide('sun','猴年限定')//key-value
    const sun = inject('sun','斗战胜佛')//提供者的value-默认初始值

    onRenderTriggered(()=>{
      
    })

    onRenderTracked((e)=>{
     
    })

   
    function userRef(value) {
      return customRef((track,trigger)=>{
        return{
          set(){},
          get(){
            return num.a
          }
        }
      })
    }
    const inc = () => {
      num.a++;
      name.value = '大闹天宫';
      msgss.msg = 'aaaaaa'
    }
    
    return {
      count,
      inc,
      num,
      msg,
      randlys,
      name,
      userRef,
      divs,
      msgss
    }
  }


}
</script>

<style scoped>

</style>
